<template>
	<div style="display: flex;justify-content: space-between">
			<h2>学生管理</h2>
	        <h2><button @click="go2add()">添加学生</button></h2>
	    </div>
	    <div style="display: flex">
	        <div style="width: 99%;border: blue 1px solid">
	            <h2 style="text-align: center">学生显示</h2>
	            <table border="1" style="width: 100%">
	                <tr>
	                    <th>编号</th>
	                    <th>名字</th>
	                    <th>账号</th>
	                    <th>密码</th>
	                    <th>教室</th>
	                    <th>图片</th>
	                    <th>操作</th>
	                </tr>
	                <tr v-for="x,idx in stus" @click="go2up(x.uid)"  >
	                    <th>{{x.uid}}</th>
	                    <th>{{x.uname}}</th>
	                    <th>{{x.phone}}</th>
	                    <th>{{x.pwd}}</th>
	                    <th>{{x.clz.clzname}}</th>
	                    <th><div style="width: 50px;height: 8vh;">
	                        <img v-bind:src="$ip+`/api/public/showimg/`+x.pic" style="width: 100% ;height: 100%">
	                    </div></th>
	                    <th><button @click="del(x.uid)">删除</button></th>
	                </tr>
	            </table>
	            <div style="text-align: center;">
					<button @click="pages(-1)">上一页</button>{{page.p}}/{{totalPages}}
	                <button  @click="pages(1)">下一页</button>
	            </div>
	        </div>
	    </div>


</template>


<script>
	export default{
		data(){
			return{
			 //定义学生数组
			stus:[{clz:{clzno:""}}],
			//定义翻页属性函数
			page:{
			//翻页行数
			pagenum:0,
			//翻页显示行数
			lines:5,
			//总行数
			total:0,
			p:1
			    },
			token:"",
			dodel:""
			}
		},
		methods:{
			go2up(uid){
				this.$router.push({
					path:'/adm/stuadd',query:{
						id:uid
					}
				})
				 },
			go2add(){
				this.$router.push({
					path:'/adm/stuadd',query:{
						id:0
					}
					
				})
				
				},
			del(uid){
				var that=this
				this.$axios.get(this.$ip+"/api/adm/stu/del?uid="+uid,{headers:{'Authorization':that.token}}).then(function(resp){
					that.stus=resp.data.data
					console.log(resp.data.data)
				})
				},
			 pages(a){
				 var that=this
				 var pagenum=this.page.pagenum
				 var lines=this.page.lines
				 if(a==1){
					pagenum=lines+pagenum
				 }
				 else{
					 pagenum=pagenum-lines
				 }
				 if(pagenum<0)pagenum=0
				 if(pagenum>this.totalPages)pagenum=this.totalPages
				this.page.pagenum=pagenum
				this.page.lines=lines
				 var b=this.$ip+"/api/adm/stu/findPage?pagenum="+parseFloat(pagenum)+"&lines="+parseFloat(lines)
				 this.$axios.get(b,{headers:{'Authorization':that.token}}).then(function(resp){
				 	that.stus=resp.data.data.students
				 	that.page.total=resp.data.data.total
					that.page.p=that.page.p+a
				 	console.log(resp.data.data)
				 })
				 }
				
		},
		computed: {
			 totalPages(){
				 let a =this.page.total/this.page.lines
				    //将小数向上取整返回
				    return Math.ceil(a)
				 }
			},
		mounted() {
			var that=this
			that.token=window.localStorage.getItem("token")
			var a=this.$ip+"/api/adm/stu/findPage?pagenum="+that.page.pagenum+"&lines="+that.page.lines
			this.$axios.get(a,{headers:{'Authorization':that.token}}).then(function(resp){
				that.stus=resp.data.data.students
				that.page.total=resp.data.data.total
				console.log(resp.data.data)
			})
		
		}
	}
</script>

<style>
</style>
